<template>
    <div class="contentIntCard">
        <h2 class="title">Expert Advice</h2>
        <p class="tips">Tips & insights on relationship and adult pleasure.</p>
        <div class="cardBox">
            <div class="card" v-for="card in cardList" :key="card.title" v-if="!isMobile">
                <img :src="card.pic" alt="card pic" />
                <h3 class="cardTitle">{{ card.title }}</h3>
                <p class="cardDesc">{{ card.desc }}</p>
                <p class="to" @click="toBlog">Learn More ></p>
            </div>
            <el-carousel :autoplay="false" arrow="always" indicator-position="none" v-else>
                <el-carousel-item v-for="(item, i) in cardList" :key="i">
                    <img :src="item.pic" class="cardPic">
                    <div class="details">
                        <h2 class="title">{{ item.title }}</h2>
                        <p class="desc" v-html="item.desc"></p>
                        <p class="to" @click="toBlog">Learn More</p>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()

const app = getCurrentInstance();
const isMobile = app?.appContext.config.globalProperties.$isMobile;
import pic1 from '@/assets/images/contentIntCard_pic1.png';
import pic2 from '@/assets/images/contentIntCard_pic2.png';
import pic3 from '@/assets/images/contentIntCard_pic3.png';
const cardList = reactive([
    {
        id: 1,
        pic: pic1,
        title: 'Better Sex Advice',
        desc: 'Masturbation is a great way to connect with yourself, enhance your pleasure...'
    },
    {
        id: 2,
        pic: pic2,
        title: 'Sexual Health Advice',
        desc: 'Knowledge is power and knowing how and where you like to be touched can ...'
    },
    {
        id: 3,
        pic: pic3,
        title: 'Sex Toy Advice',
        desc: 'Want to know which sex toys to choose for a happier, more fulfilling sex life? '
    },
    {
        id: 4,
        pic: pic2,
        title: 'Sex Toy Advice',
        desc: 'Want to know which sex toys to choose for a happier, more fulfilling sex life? '
    }
])
const toBlog = () => {
    router.push({ name: 'blog' });
}
</script>
<style lang="scss" scoped>
.contentIntCard {
    margin: 120px 0;

    .title {
        font-size: 60px;
        font-weight: 700;
        line-height: 1;
        text-align: center;
    }

    .tips {
        font-size: 28px;
        font-weight: 600;
        line-height: 48px;
        text-align: center;
        margin-top: 22px;
    }

    .cardBox {
        margin-top: 45px;
        display: flex;
        padding: 0 53px;
        justify-content: space-between;

        .card {
            width: 442px;

            img {
                display: block;
                width: 100%;
                height: 423px;
            }

            .cardTitle {
                font-size: 24px;
                font-weight: 600;
                line-height: 1;
                text-align: center;
                margin-top: 23px;
            }

            .cardDesc {
                font-size: 20px;
                font-weight: 400;
                line-height: 28px;
                text-align: center;
                margin-top: 22px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                color: #282828;

            }

            .to {
                font-size: 24px;
                line-height: 1;
                text-align: center;
                color: #846FC1;
                cursor: pointer;
                margin-top: 20px;
                font-weight: 600;
            }
        }
    }
}

@media screen and (max-width: 750px) {
    .contentIntCard {
        margin: 1rem 0 0.7rem;

        .title {
            font-size: 0.52rem;
        }

        .tips {
            font-size: 0.28rem;
            line-height: 1;
            margin-top: 0.22rem;
            font-weight: 400;
        }

        .cardBox {
            padding: 0;
            margin-top: 0.6rem;

            :deep(.el-carousel) {
                padding: 0;
                width: 100%;

                .el-carousel__container {
                    height: 9.3rem;
                }

                .el-carousel__item {
                    padding: 0 0.45rem;
                }

                .el-carousel__arrow {
                    bottom: auto;
                    top: 3rem;
                    width: 0.74rem;
                    height: 0.74rem;
                    border: 1px solid #fff;
                    font-size: 20px;
                }

                .el-carousel__arrow--right {
                    right: 0;
                }

                .el-carousel__arrow--left {
                    left: auto;
                    left: 0;
                }
                .cardPic{
                    display: block;
                    width: 100%;
                }
                .details{
                    .title{
                        font-size: 0.28rem;
                        line-height: 1;
                        margin-top: 0.7rem;
                    }
                    .desc{
                        font-size: 0.24rem;
                        line-height: 0.32rem;
                        margin-top: 0.2rem;
                        text-align: center;
                    }
                    .to{
                        width: 2.2rem;
                        height: 0.64rem;
                        line-height: 0.64rem;
                        font-size: 0.2rem;
                        text-align: center;
                        color: #fff;
                        background: #846FC1;
                        margin: 0.3rem auto 0;
                        font-weight: 400;
                        border-radius: 0.32rem;
                    }
                }
            }
        }
    }

}
</style>